<!--
 * @Description: 计划列表
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2021-12-01 11:32:38
 * @LastEditTime: 2023-01-10 10:34:58
 * @FilePath: \cscec-pms-admin\src\views\construction\constructionSchedule\planList.vue
-->
<template>
  <base-breadcrumb :title="breadcrumb">
    <!-- 搜索 -->
    <searchData
      :search-data="searchOption2"
      @search="search"
    />
    <!-- 搜索 -->
    <a-card>
      <title-name :title="breadcrumbText[mode]+'计划列表'" />
      <div class="pub-table-select-count">
        <a-icon
          type="info-circle"
          theme="twoTone"
        />
        <span>
          项目名称：<span class="totalNum">{{ total.projectName }}</span> |
        </span>
        <span>
          已进行{{ breadcrumbText[mode] }}计划 <span class="totalNum">{{ total.hasProceed }}</span> {{ mode === 'month'?'个':'' }}{{ breadcrumbText[mode] }} |
        </span>
        <span>
          未进行{{ breadcrumbText[mode] }}计划 <span class="totalNum">{{ total.notProceed }}</span> {{ mode === 'month'?'个':'' }}{{ breadcrumbText[mode] }} |
        </span>
        <span>
          当前进行{{ breadcrumbText[mode] }}计划 <span class="totalNum">{{ total.currentProceedPlan }}</span>
        </span>
      </div>
      <s-table
        ref="table"
        row-key="id"
        :columns="columns"
        :data="loadData"
        show-size-changer
        show-quick-jumper
        bordered
        :row-class-name="rowClassName"
      >
        <MoreButton
          v-if="mode === 'month'"
          slot="operation"
          slot-scope="text, record"
        >
          <!-- v-if="record.tageCode == 'PD'" -->
          <a
            v-btnPermission="'pm_010_loo_01'"
            @click="handleDetail(record)"
          >查看</a>
          <a
            v-if="record.status==1 || record.status==4"
            v-btnPermission="'pm_010_edi_02'"
            @click="handleUpdate(record)"
          >编辑</a>
          <a
            v-if="record.status==1 || record.status==4"
            v-btnPermission="'pm_010_sub_03'"
            @click="hanleApprove(record)"
          >提交审批</a>
          <a
            v-if="record.reviewButton == 1"
            v-btnPermission="'pm_010_loo_01'"
            @click="$bus.$emit('showApprovalDetailsDialog', record.id)"
          >审批信息</a>
        </MoreButton>
        <MoreButton
          v-else
          slot="operation"
          slot-scope="text, record"
        >
          <!-- v-if="record.tageCode == 'PD'" -->
          <a
            v-btnPermission="'pm_011_loo_01'"
            @click="handleDetail(record)"
          >查看</a>
          <a
            v-if="record.status==1 || record.status==4"
            v-btnPermission="'pm_011_edi_02'"
            @click="handleUpdate(record)"
          >编辑</a>
          <a
            v-if="record.status==1 || record.status==4"
            v-btnPermission="'pm_011_sub_03'"
            @click="hanleApprove(record)"
          >提交审批</a>
          <a
            v-if="record.reviewButton == 1"
            v-btnPermission="'pm_011_loo_01'"
            @click="$bus.$emit('showApprovalDetailsDialog', record.id)"
          >审批信息</a>
        </MoreButton>
      </s-table>
    </a-card>
    <div class="page-btn-right-top">
      <a-button @click="$close">
        关闭
      </a-button>
    </div>
    <!-- 选择审批人 -->
    <selectApprover
      :business-id="businessId"
      :process-config="setProcessConfig"
      :is-close-upper="false"
    />
    <!-- 选择审批人 -->
  </base-breadcrumb>
</template>
<script>
import { searchOption2, columns6, columns7 } from './model.js'
import { plan } from '@/api/construction/constructionSchedule'
export default {
  name: 'planList' + Date.now(),
  components: {},
  data() {
    return {
      // 搜索项
      searchOption2,
      // 查询参数
      searchData: {},
      // 计划类型
      mode: this.$route.query.mode,
      // 表格加载
      loading: false,
      // 面包屑名字
      breadcrumb: '',
      // 面包屑文字
      breadcrumbText: {
        month: '月',
        week: '周'
      },
      // 统计
      total: {
        projectName: void 0,
        hasProceed: void 0,
        notProceed: void 0,
        currentProceedPlan: void 0
      },
      // 流程配置
      processConfig: null,
      //点击提交发送流程配置值
      setProcessConfig: null,
      // 业务id
      businessId: null
    }
  },
  computed: {
    // 表头
    columns() {
      return this.mode === 'week' ? columns6 : columns7
    }
  },
  async created() {
    //获取通过获取流程配置值
    this.processConfig = await this.$getConfigFn(this.mode === 'week' ? 'construction_implementation_week' : 'construction_implementation_month')
  },
  mounted() {
    this.setBreadcrumb()
  },
  methods: {
    /**
     * @description: 设置面包屑名字
     * @param {void}
     * @return {void}
     */
    setBreadcrumb() {
      this.breadcrumb = `施工进度${this.breadcrumbText[this.mode]}计划`
    },
    /**
     * @description: 搜索
     * @param {Object} value 搜索数据
     * @return {Void}
     */
    search(value) {
      this.searchData = value || {}
      this.$refs.table.refresh(true)
    },
    /**
     * @description: 表格数据加载方法
     * @param {Object} parameter 分页信息
     * @return {Promise} 接口Promise
     */
    async loadData(parameter) {
      try {
        const fun = this.mode === 'week' ? plan.scheduleWeekPlanList : plan.scheduleMonthPlanList
        const fun1 = this.mode === 'week' ? plan.scheduleWeekPlanCount : plan.scheduleMonthPlanCount
        const res = await fun(Object.assign({}, parameter, { query:{... this.searchData, masterPlanId: this.$route.query.planId } }))
        const {
          code: code1,
          data: {
            projectName,
            hasProceedPlanNum,
            noProceedPlanNum,
            currentProceedPlan,
            projectId
          }
        } = await fun1(Object.assign({}, this.searchData,{ masterPlanId: this.$route.query.planId }))
        if (code1 === 200) {
          this.total = {
            projectName,
            hasProceed: hasProceedPlanNum,
            notProceed: noProceedPlanNum,
            currentProceedPlan: currentProceedPlan,
            projectId
          }
        }
        return res
      } catch (error) {
        console.log(error)
        return Promise.reject(error)
      }
    },
    /**
     * @description:
     * @param {object} row 行数据
     * @param {number} index 索引
     * @return {void}
     */
    rowClassName(row, index) {
      return row.warningRed + '' === '1' ? 'has-been' : ''
    },
    /**
     * @description: 查看
     * @param {object} row 行数据
     * @return {void}
     */
    handleDetail({ id }) {
      this.$router.push({
        path: '/construction/constructionSchedule/implementationManagement/planDetails',
        query: {
          id,
          projectId: this.total.projectId,
          mode: this.mode,
          pageType: 'detail'
        }
      })
    },
    /**
     * @description: 编辑
     * @param {object} row 行数据
     * @return {void}
     */
    handleUpdate({ id }) {
      this.$router.push({
        path: '/construction/constructionSchedule/implementationManagement/planDetails',
        query: {
          id,
          projectId: this.total.projectId,
          mode: this.mode,
          pageType: 'update'
        }
      })
    },
    /**
     * @description: 提交审批
     * @param {object} record 行数据
     * @return {void}
     */
    hanleApprove(record) {
      const vm = this
      this.$confirm({
        title: '提交确认',
        content: '请确认是否要提交？',
        onOk() {
          let fun = void 0
          let params = void 0
          vm.setProcessConfig = null
          if (vm.mode === 'week') {
            fun = plan.weekPlanSubmitApproval
            params = { weekPlanId: record.id }
          } else {
            fun = plan.monthPlanSubmitApproval
            params = { monthPlanId: record.id }
          }
          fun(params)
            .then(({ code, data: id }) => {
              if (code === 200) {
                vm.$message.success('提交审批成功')
                vm.$refs.table.refresh(true)
                vm.businessId = id
                vm.setProcessConfig = vm.processConfig
              } else {
                vm.$message.warning('提交审批失败')
              }
            })
            .catch((error) => {
              vm.$message.warning(error)
            })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';
@{deep} .has-been {
  background-color: #f85c62;
  color: #fff;
}
@{deep} .ant-table-body .ant-table-row-hover {
  color: rgba(0, 0, 0, 0.65);
}
</style>

